<script setup>
import * as api from '@/api/public';
import * as house from '@/api/basic/house.js';
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive, ref } from 'vue';
import ComponentsBox from './components/ComponentsBox.vue';
import EditDialog from './components/EditDialog.vue';
import ImportExcel from '@/components/ImportExcel.vue';
import TreeSelector from "@/views/Basic/House/components/TreeSelector.vue";
import store from "@/store/index.js";
    // 列表数据
    const list = reactive({data:[]})

    // 详情弹窗数据
    const gridData = reactive([]);

    // 分页器参数
    let pageSize = ref(10);
    let currentPage = ref(1);
    let total = ref(0);

    const delBtn = ref(true)

    const ids = ref([])

    // form表单类============
    let form = ref({})
    // ==============

    let dialogVisible = ref(false);
    let dialogTableVisible = ref(false);
    const importExcelVisible = ref(false);

    // 初始化
    const init = (p) =>{
        house.getList({
            ...p,
            page: currentPage.value,
            size: pageSize.value
        }).then(res =>{
            console.log('=ww',res)
            list.data = res.data
            total.value = res.total;
        })
    }

    init()

    // 弹窗
    const dialog = (v) => {
        form.value = v;
        dialogVisible.value = true;
    }

    // 查看详情方法
    const detail = (data) =>{
        gridData.length = 0;
        gridData.push(data);
        console.log(gridData)
        dialogTableVisible.value = true;
    }

    // 删除方法
    const del = () => {
        ElMessageBox.confirm('请确认删除...', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            house.remove(ids.value,).then((res) => {
                ElMessage({
                    message: res.msg,
                    type: 'success'
                })
                init()
            })
        })
    }

    const query = (v) => {
        init(v)
    }

    const exportExcel = () =>{
        house.exportExcel()
    }

    const uploadSuccess = (res) => {
      if (res.code == 200){
        init()
        ElMessage.success(res.msg)
        return
      }
      uploadFailure(res)
    }

    const uploadFailure = (res) => {
      if (res.code == 500) {
        init()
        ElMessage.error(res.msg)
        return
      }
      uploadSuccess(res)
    }

    const downloadExcelTemplate = () =>{
        house.downloadExcelTemplate()
    }

    const selectRow = (v) => {
        ids.value = v.map(i => i.id)
        console.log(ids.value)
        delBtn.value = ids.value.length === 0;
    }

    const pageChange = (v) => {
        currentPage.value = v;
        init();
    }

    const pageSizeChange = (v) => {
        pageSize.value = v;
        init();
    }
</script>
<template>
    <div class="tree">
        <TreeSelector @transfer="query"></TreeSelector>
    </div>
    <div class="container"  >
        <div class="head">
          <div class="bottom">
            <!-- 添加按钮 -->
            <el-button type="primary" @click="importExcelVisible = !importExcelVisible">导入房屋信息</el-button>
            <el-button type="primary" @click="downloadExcelTemplate">下载导入模板</el-button>
            <el-button type="primary" @click="exportExcel">导出房屋信息</el-button>
            <el-button type="danger" :disabled="delBtn" @click="del">批量删除</el-button>
          </div>
            <!-- 查询功能组件 -->
            <ComponentsBox @query="query"></ComponentsBox>
        </div>
        <div class="middle">
            <!-- 表格 -->
            <el-table :data="list.data"
                      v-loading="store.state.loaded"
                      border
                      @selection-change="selectRow"
                      style="width: 100% " >
              <el-table-column type="selection" width="60" />
              <el-table-column fixed type="index" label="序号" width="60"/>
              <el-table-column prop="thirdHouseId" label="第三方房屋ID" width="250"/>
              <el-table-column prop="houseNum" label="房号" width="110"/>
              <el-table-column prop="houseFloor" label="所在楼层" width="90" />
              <el-table-column prop="buildingArea" label="建筑面积m²" width="120"/>
              <el-table-column prop="innerArea" label="套内面积m²" width="120"/>
              <el-table-column prop="publicArea" label="公摊面积m²" width="120"/>
              <el-table-column prop="houseType" label="房屋业态" width="110"/>
              <el-table-column prop="houseStatus" label="房屋状态" width="110"/>
              <el-table-column prop="resideDate" label="入住日期" width="250"/>
              <el-table-column fixed="right" label="操作" min-width="150">
                <template #default="scope">
                  <el-button type="primary" size="small" @click="dialog(scope.row)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
        </div>
        <div class="footer">
            <!-- 分页器 -->
            <el-pagination background style="margin-top: 10px; width: 100%;"
            layout="prev, pager, next, jumper, total, sizes"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :current-page="currentPage"
            @current-change="pageChange"
            @size-change="pageSizeChange"
            :total="total"/>
        </div>
        <!-- 编辑弹窗 -->
        <edit-dialog @success="init" :data="form" v-model="dialogVisible" />
        <!-- 导入excel -->
        <ImportExcel @success="uploadSuccess" @failure="uploadFailure" url="/api/house/excel" v-model="importExcelVisible"/>
    </div>
</template>
<style lang="scss" scoped>

    .tree{
      width: 15%;
      height: 100%;
      float: left;
    }

    .container{
       width: 85%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .head{
            margin-bottom: 6px;
            .bottom{
                display: flex;
            }
        }
        .middle{
            margin-bottom: 12px;
        }
    }
</style>
